<template>
  <div class="pageW">
    <el-page-header @back="goBack"></el-page-header>
    <el-card class="box">
      <div class="merchant">
        <div class="top">
          <div class="left">
            <div class="t">
              <div class="tit">{{ baseInfo.memberName }}</div>
              <div class="tip">{{ baseInfo.remark }}</div>
            </div>
            <div class="b">
              <el-tag
                type="info"
                effect="plain"
                @click="copyAppId(baseInfo.memberNo)"
                style="cursor: pointer"
                >商户ID： {{ baseInfo.memberNo }}</el-tag
              >
              <el-tag
                type="info"
                effect="plain"
                @click="copyAppId(baseInfo.appId)"
                style="cursor: pointer"
                >App ID： {{ baseInfo.appId }}</el-tag
              >
            </div>
          </div>
          <div class="right">
            <div class="com-wrap">
              <div class="com" @click="toEdit">
                <div class="t">
                  <img src="@/assets/imgs/setting/edit.png" alt="" />
                </div>
                <div class="b">编辑</div>
              </div>
              <!-- <div class="com">
                <div class="t" style="background: #e23d28">
                  <img src="@/assets/imgs/setting/del.png" alt="" />
                </div>
                <div class="b">删除</div>
              </div> -->
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="wrap">
            <div class="item">
              <div class="left">
                <img src="@/assets/imgs/checkAccount/total2.png" alt="" />
              </div>
              <div class="right">
                <div class="t">可用金额</div>
                <div class="b">
                  {{
                    walletInfo.avl_balance == null
                      ? "-"
                      : `¥ ${walletInfo.avl_balance}`
                  }}
                </div>
              </div>
            </div>
            <div class="item">
              <div class="left">
                <img src="@/assets/imgs/checkAccount/total3.png" alt="" />
              </div>
              <div class="right">
                <div class="t">可提现金额</div>
                <div class="b">
                  {{
                    walletInfo.withdrawableBalance == null
                      ? "-"
                      : `¥ ${walletInfo.withdrawableBalance}`
                  }}
                </div>
              </div>
            </div>
            <div class="item">
              <div class="left">
                <img src="@/assets/imgs/checkAccount/total5.png" alt="" />
              </div>
              <div class="right">
                <div class="t">所属商户</div>
                <div class="b noNum">{{ baseInfo.parentName }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <el-card class="box">
      <div class="account">
        <div class="top">
          <div class="title">账号信息</div>
        </div>
        <div class="bottom">
          <div class="item">
            <span class="tit">登录邮箱</span>
            <span v-if="baseInfo.email"
              >{{ baseInfo.email }}&nbsp;&nbsp;&nbsp;
            </span>
            <span>{{ baseInfo.inviteStatusName }}</span>
          </div>
          <div class="item">
            <span class="tit">允许退款</span>
            <span>{{ baseInfo.refundFlag ? "是" : "否" }}</span>
          </div>
        </div>
      </div>
    </el-card>

    <el-card class="box">
      <div class="channel">
        <div class="top">
          <div class="title">支付渠道</div>
          <span class="noData" v-if="!channelInfoShow"
            >暂未配置任何支付渠道</span
          >
        </div>
        <div class="bottom" v-if="channelInfoShow">
          <div class="nav-tab">
            <div
              class="tab-item"
              v-for="(item, index) of channelInfo"
              :key="index"
              :class="curIdx === index ? 'active' : ''"
              @click="changeTab(index)"
            >
              {{ item.name }}
            </div>
          </div>
          <div class="nav-list">
            <div class="list">
              <div
                v-for="(item, index) of channelInfo[curIdx].openList.filter(
                  (item) => item.whetherComplete
                )"
                :key="index"
                class="list-item"
              >
                <div class="tit">{{ item.name }}</div>
                <div class="desc">{{ item.desc }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <el-card class="box">
      <div class="payment">
        <div class="top">
          <div class="title">收款账户</div>
          <span class="noData" v-if="accInfo.length == 0"
            >暂未配置任何收款账户</span
          >
        </div>
        <div class="bottom" v-if="accInfo.length !== 0">
          <div class="item" v-for="(item, index) of accInfo" :key="index">
            <span class="tit">{{ item.name }}</span>
            <div class="list">
              <div class="item" v-for="(item, idx) of item.info" :key="idx">
                {{ item.name }} : {{ item.value }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <el-card class="box">
      <div class="payment">
        <div class="top">
          <div class="title">开发参数</div>
        </div>
        <div class="bottom">
          <div class="param-item">
            <div class="tit">Test Secret Key</div>
            <div class="com">
              <el-input
                placeholder="请输入内容"
                v-model="paramInfo.apiTestSecret"
                disabled
              ></el-input>
            </div>
          </div>
          <div class="param-item">
            <div class="tit">Live Secret Key</div>
            <div class="com">
              <el-input
                placeholder="请输入内容"
                v-model="paramInfo.apiLiveSecret"
                disabled
              ></el-input>
            </div>
          </div>
          <div class="param-item">
            <div class="tit">云尘付公钥</div>
            <div class="com">
              <el-input
                placeholder="请输入内容"
                v-model="paramInfo.publicKey"
                disabled
                type="textarea"
                :rows="10"
              ></el-input>
            </div>
          </div>
          <div class="param-item">
            <div class="tit">商户 RSA 公钥</div>
            <div class="com">
              <el-input
                placeholder=""
                v-model="paramInfo.merchantPublicKey"
                disabled
                type="textarea"
                :rows="10"
              ></el-input>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "childMerchantInfo",
  data() {
    return {
      channelInfoShow: false,
      baseInfo: {},
      walletInfo: {},
      channelInfo: [],
      accInfo: [
        {
          channel: "wechat",
          info: [
            {
              name: "账号名称",
              value: "ronnie123",
            },
            {
              name: "微信 OpenID",
              value: "423142314445512212312312312312",
            },
          ],
        },
        {
          channel: "ali",
          info: [
            {
              name: "账号名称",
              value: "ronnie123123123",
            },
            {
              name: "收款账号",
              value: " 45636856@qq.com",
            },
          ],
        },
      ],
      curIdx: 0,
      paramInfo: {
        apiTestSecret: "sk_test_fv9Ga9nf5u14H0CuX9HivzXH",
        apiLiveSecret: "sk_live_0GCO44O4m1CCOyDeH0irPGOS",
        publicKey: `-----BEGIN PUBLIC KEY-----
        MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAtV/0qEOUBOm+JoQKz4bQ
        W0JqQT3mu3CRGo2CzqeLQyFSCw9uLci/VqwQQXzIleCBd+zj7rFM9mMu8qYjKzKO
        gFEL15DyVAZcNcJ0kVenO3Da6Pqypsov6UDDOreIU18YV+tH2OY2G6yjyGyML0g/
        Rvl8Osfta8R9P23SOIyXuaAE15A7f5H3m6cTeb1IfIxINwg2zmE2c7dlKHKHFXe5
        spNpn8sdmtRgJSuMZo1t/mzR7hFYV0lFMRDH/Xb7GlZubEVUGoFGXgiCcbH7qTdZ
        ghrHGKNDkDllc7kRGWEdvA7LLU7VThOoiNC4oG36ayaqee9qSD0h/VaC6qj03S+9
        qwIDAQAB
        -----END PUBLIC KEY-----`,
        merchantPublicKey: `-----BEGIN PUBLIC KEY-----
        MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAtV/0qEOUBOm+JoQKz4bQ
        W0JqQT3mu3CRGo2CzqeLQyFSCw9uLci/VqwQQXzIleCBd+zj7rFM9mMu8qYjKzKO
        gFEL15DyVAZcNcJ0kVenO3Da6Pqypsov6UDDOreIU18YV+tH2OY2G6yjyGyML0g/
        Rvl8Osfta8R9P23SOIyXuaAE15A7f5H3m6cTeb1IfIxINwg2zmE2c7dlKHKHFXe5
        spNpn8sdmtRgJSuMZo1t/mzR7hFYV0lFMRDH/Xb7GlZubEVUGoFGXgiCcbH7qTdZ
        ghrHGKNDkDllc7kRGWEdvA7LLU7VThOoiNC4oG36ayaqee9qSD0h/VaC6qj03S+9
        qwIDAQAB
        -----END PUBLIC KEY-----`,
      },
      // rule: {
      //   memberName: [
      //     { required: true, message: "请输入子商户名称", trigger: "change" },
      //   ],
      // },
      // page: 1,
      // value1: "",
      // value2: false,
      // form: { parent: [] },
      // hasEdit: false,
    };
  },
  created() {
    // const id = this.$route.query.row.id;
    const id = this.$route.query.id;
    if (id) {
      this.getMemberbase(id); //获取子商户基本信息
      this.getChannelList(id); //获取渠道
      this.getAccList(id); //获取账户
      this.getParamsInfo(id); //获取开发参数

      this.getWallet(id); //获取金额
    }
  },
  watch: {
    "$store.state.testLine": {
      handler() {
        if (this.$route.name == this.$options.name) {
          const id = this.$route.query.id;
          if (id) {
            this.getMemberbase(id); //获取子商户基本信息
            this.getChannelList(id); //获取渠道
            this.getAccList(id); //获取账户
            this.getParamsInfo(id); //获取开发参数
            this.getWallet(id); //获取金额
          }
        }
      },
    },
    deep: true,
  },
  methods: {
    copyAppId(value) {
      const input = document.createElement("input"); // 创建input对象
      input.value = value; // 设置复制内容
      document.body.appendChild(input); // 添加临时实例
      input.select(); // 选择实例内容
      document.execCommand("Copy"); // 执行复制
      document.body.removeChild(input); // 删除临时实例
      this.$message.success("复制成功！");
    },
    // 获取开发参数列表
    getParamsInfo(memberId) {
      // var params = new FormData();
      // params.append("memberId", memberId);
      let params = {
        memberId,
      };
      this.$http
        .post("/api/developparam/listMerchantSecret", params)
        .then((res) => {
          if (res.code === "0000") {
            //console.log(res.data);
            this.paramInfo = res.data || {};
            // this.form4.merchantPublicKey = res.data.merchantPublicKey;
          }
        });
    },
    getAccList(id) {
      this.$http
        .get(`/api/sub/member/base/channel/account/list?memberId=${id}`)
        .then((res) => {
          if (res.code === "0000") {
            //console.log(res.data);
            let list = res.data.filter(
              (item) => item.info && Object.keys(item.info).length > 0
            );
            //console.log(list);
            let listc = JSON.parse(JSON.stringify(list));
            listc.map((item) => {
              let keyList = Object.keys(item.info);
              var arr = [];
              keyList.forEach((key) => {
                switch (item.type) {
                  case "ali":
                    if (key == "ali_account_name") {
                      arr.push({
                        name: "账号名称",
                        value: item.info[key],
                      });
                    }
                    if (key == "ali_member_id") {
                      arr.push({
                        name: "支付宝账号",
                        value: item.info[key],
                      });
                    }
                    break;
                  case "wechat_lite":
                  case "wechat_jsapi":
                  case "wechat_app":
                    if (
                      key == "wechat_lite_account_name" ||
                      key == "wechat_jsapi_account_name" ||
                      key == "wechat_app_account_name"
                    ) {
                      arr.push({
                        name: "账号名称",
                        value: item.info[key],
                      });
                    }
                    if (
                      key == "wechat_lite_member_id" ||
                      key == "wechat_jsapi_member_id" ||
                      key == "wechat_app_member_id"
                    ) {
                      arr.push({
                        name:
                          item.account_type == "MERCHANT_ID"
                            ? "微信商户号"
                            : "用户OpenID",
                        value: item.info[key],
                      });
                    }
                    break;
                  case "ada":
                    if (key == "ada_member_id") {
                      arr.push({
                        name: "渠道商户ID",
                        value: item.info[key],
                      });
                    }
                    break;
                  case "douyin":
                    if (key == "douyin_member_id") {
                      arr.push({
                        name: "渠道商户ID",
                        value: item.info[key],
                      });
                    }
                    break;
                }
              });
              //console.log(arr);
              item.info = arr;
              return item;
            });
            // console.log(list);
            //console.log(listc);
            this.accInfo = listc;
          }
        });
    },
    getChannelList(id) {
      this.$http
        .get(`/api/sub/member/base/channel/param/list?memberId=${id}`)
        .then((res) => {
          if (res.code === "0000") {
            //console.log(res.data);
            this.channelInfo = res.data;
            this.channelInfo.forEach((e) => {
              e.openList.forEach((a) => {
                console.log(a);
                if (JSON.stringify(a.info) !== "{}") {
                  this.channelInfoShow = true;
                }
              });
            });
          }
        });
    },
    getMemberbase(id) {
      this.$http.get(`/api/merchant/memberbase/get?id=${id}`).then((res) => {
        if (res.code === "0000") {
          //console.log(res.data);
          this.baseInfo = res.data;
          // this.form = res.data;
          // this.form.parent = res.data.parentId;
          // this.form.parent = [res.data.parentId];
        }
      });
    },
    getWallet(id) {
      this.$http
        .get(`/api/merchant/settleaccount/balance?memberId=${id}&acctType='01'`)
        .then((res) => {
          if (res.code === "0000") {
            //console.log(res.data);
            this.walletInfo = res.data;
          }
        });
    },
    changeTab(idx) {
      this.curIdx = idx;
    },
    toEdit() {
      this.$router.push({
        path: "/merchant/childMerchantEdit",
        query: { id: this.$route.query.id },
      });
    },
    submit() {
      this.$http
        .post(`/api/merchant/memberbase/edit`, {
          id: this.$route.query.row.id,
          memberName: this.form.memberName,
          remark: this.form.remark,
          refundFlag: this.form.refundFlag ? true : false,
        })
        .then((res) => {
          if (res.code === "0000") {
            this.$message.success("编辑成功！");
            this.goBack();
          }
        });
    },
    goBack() {
      this.$backTo(`/merchant/childManagement`);
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  margin-bottom: 10px;
}
.merchant {
  padding: 15px 20px;
  .top {
    padding-bottom: 39px;
    border-bottom: 1px solid #d8d8d8;
    display: flex;
    justify-content: space-between;
    .left {
      .t {
        margin-bottom: 20px;
        div {
          display: inline-block;
        }
        .tit {
          font-size: 24px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #1d1c1c;
          margin-right: 20px;
          // line-height: 33px;
        }
        .tip {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #7a8287;
          // line-height: 17px;
        }
      }
      .b {
        :deep(.el-tag--small) {
          padding: 6px 13px;
          height: auto;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #7a8287;
          line-height: 20px;
          margin-right: 10px;
        }
      }
    }
    .right {
      margin-right: 30px;
      .com-wrap {
        margin-top: 15px;
        display: flex;
        .com {
          margin: 0 25px;
          cursor: pointer;

          .t {
            width: 36px;
            height: 36px;
            line-height: 45px;
            text-align: center;
            border-radius: 36px;
            background: #869daa;
          }
          .b {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #4f595f;
            text-align: center;
            margin-top: 5px;
          }
        }
      }
    }
  }
  .bottom {
    margin-top: 33px;
    .wrap {
      display: flex;
      .item {
        width: 33.3%;
        display: flex;
        .left {
          margin-right: 30px;
        }
        .right {
          .t {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #869daa;
            line-height: 17px;
          }
          .b {
            font-size: 20px;
            font-family: GothamSSm-Medium, GothamSSm;
            font-weight: 500;
            color: #4f595f;
            line-height: 24px;
            &.noNum {
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #1d1c1c;
              line-height: 20px;
            }
          }
        }
      }
    }
  }
}

.account,
.payment,
.channel {
  padding: 5px 20px 10px 20px;
  .top {
    display: flex;
    align-items: center;
    .title {
      font-size: 18px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #4f595f;
      margin-right: 35px;
    }
    .noData {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #7a8287;
    }
  }
  .bottom {
    margin-top: 20px;
  }
}

.account {
  .bottom {
    display: flex;
    .item {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #1d1c1c;
      width: 33.3%;
      .tit {
        display: inline-block;
        margin-right: 20px;
        color: #666666;
      }
    }
  }
}

.payment {
  .bottom {
    .item {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #1d1c1c;
      margin-top: 5px;
      .tit {
        display: inline-block;
        width: 70px;
        text-align: right;
        margin-right: 70px;
        color: #666666;
      }
      .list {
        .item {
          display: inline-block;
          margin-right: 15px;
        }
      }
    }
  }
}

.channel {
  .bottom {
    .nav-tab {
      display: flex;
      margin-bottom: 14px;
      .tab-item {
        width: 185px;
        padding: 9px 27px;
        text-align: center;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.65);
        border-top: 2px solid transparent;
        cursor: pointer;

        &.active {
          color: #03bfc6;
          border-top: 2px solid #03bfc6;
        }
      }
    }
    .nav-list {
      .list {
        display: flex;
        flex-wrap: wrap;
        .list-item {
          width: 23.5%;
          height: 116px;
          background: #ffffff;
          border-radius: 10px;
          border: 1px solid #d8d8d8;
          padding: 30px;
          margin-right: 20px;
          margin-bottom: 20px;
          .tit {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #1d1c1c;
            margin-bottom: 12px;
          }
          .desc {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
          }
        }
      }
    }
  }
}

.param-item {
  width: 100%;
  margin-bottom: 25px;
  .tit {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    margin-bottom: 10px;
  }
  .com {
    display: flex;
  }
  &.noInput {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
// $-padding-left: 70px;
// .pageW {
//   .wrap {
//     background: #fff;
//     margin-top: 20px;
//     padding-bottom: 40px;
//     .title {
//       font-size: 24px;
//       font-weight: 500;
//       height: 40px;
//       line-height: 40px;
//       color: #25b5d9;

//       position: relative;
//       &::before {
//         content: "";
//         width: 95px;
//         height: 10px;
//         background: #25b5d9;
//         border-radius: 5px;
//         position: absolute;
//         top: 55px;
//       }
//     }
//     .header {
//       display: flex;
//       justify-content: space-between;
//       padding: 20px 40px 20px 70px;
//       border-bottom: 1px solid #f0f0f0;
//     }
//     .secTitle {
//       padding-left: 38px;
//       font-weight: 600;
//       color: #4f595f;
//       font-size: 20px;
//     }
//     .el-form-item {
//       padding-left: $-padding-left;
//     }
//     .cardNum {
//       font-weight: 500;
//       color: #1d1c1c;
//       font-size: 14px;
//       margin-right: 180px;
//     }
//     .typeText {
//       display: inline-block;
//       width: 162px;
//       color: #1d1c1c;
//       font-size: 14px;
//       font-weight: 400;
//     }
//     .typeBox {
//       padding-left: $-padding-left;
//       span {
//         display: inline-block;
//         width: 110px;
//         height: 48px;
//         line-height: 48px;
//         color: #869daa;
//         background: #f4f8fb;
//         text-align: center;
//         border-radius: 4px 4px 0px 0px;
//         cursor: pointer;
//         &:nth-child(2) {
//           margin: 0 2px;
//         }
//       }
//       .active {
//         color: #fff;
//         background: #03bfc6;
//       }
//     }
//     .fillParams {
//       display: flex;
//       justify-content: space-between;
//       padding-left: $-padding-left;
//       width: 700px;
//       margin-top: 34px;
//       .fillText {
//         font-weight: 500;
//         color: #4f595f;
//         line-height: 25px;
//       }
//       .fillSecText {
//         font-weight: 400;
//         color: #869daa;
//         font-size: 12px;
//         margin-top: 12px;
//         margin-bottom: 26px;
//       }
//     }
//     .tooltipIcon {
//       font-size: 16px;
//       margin-right: 34px;
//       color: #869daa;
//     }
//     ._posi {
//       position: relative;
//       top: -54px;
//     }
//     .change {
//       width: 130px;
//       position: relative;
//       top: 70px;
//       left: -130px;
//     }
//     .btnIcon {
//       width: 120px;
//     }
//   }

//   .pageTwo {
//     display: flex;
//     justify-content: space-between;
//     .pageTwoLeft {
//       width: 65%;
//       .el-form-item {
//         padding-left: 40px;
//       }
//     }

//     .hintBox {
//       flex: 1;
//       padding-left: 53px;
//       background: #f9f9f9;
//       color: #bfbfbf;
//       font-weight: 400;
//       color: #bfbfbf;
//       line-height: 24px;
//       .s_title {
//         color: #666;
//         font-weight: 500;
//         margin-bottom: 5px;
//       }
//     }
//   }
// }
</style>
